<template>
	<view>
		<view class="mcht-container" v-if="mchntList && mchntList.length > 0">
			<view class="mcht-item" v-for="(item, index) in mchntList" :key="index">
				<view class="mcht-item-left">
					<view class="mcht-left-line1">{{ item.mchntName }}</view>
					<view class="mcht-left-line2">{{ item.addr }}</view>
				</view>

				<view class="mcht-item-right">
					<block v-if="item.distance">
						<view class="mcht-right-line1" :data-item="item" @tap.stop.prevent="openLocation">
							<image class="icon-map" src="/static/image/dialog_ic_map@2x.png"></image>
							<text>导航</text>
						</view>
						<view class="mcht-right-line2">
							<text>距你{{ item.distance }}公里</text>
						</view>
					</block>
					<block v-else>
						<view class="mcht-right-line2">
							<text>暂无位置信息</text>
						</view>
					</block>
				</view>
			</view>
		</view>

		<view class="noMore" v-if="noMore">已经到底了</view>
	</view>
</template>
<script module="util" lang="wxs" src="../../../utils/util.wxs"></script>
<script>
	import couponMchtList from '@/components/couponMchtList/couponMchtList';
	const app = getApp();
	const util = require('./../../../utils/util.js');
	import {
		http
	} from '@/utils/commonRequest.js'; // 局部引入

	export default {
		components: {
			couponMchtList
		},
		data() {
			return {
				merchants: null,
				couponId: '',
				actId: '',
				allSize: '',
				noMore: '',
				isActive: false,
				templete: [],

				params: {
					pageNum: 1,
					pageSize: 10,
					couponId: '',
					actId: ''
				},

				mchntList: ''
			};
		},
		onLoad: function(options) {
			if (options && options.couponId) {
				this.couponId = options.couponId ? options.couponId : ''
			}

			if (options && options.actId) {
				this.actId = options.actId ? options.actId : ''
			}

			this.queryMchtList(this.couponId, this.actId);
		},
		onReachBottom: function() {
			// if (!this.data.noMore) {
			// 	return;
			// }
			this.params.pageNum++;
			this.params.actId = this.actId;

			if (this.params.pageNum > Math.ceil(this.allSize / this.params.pageSize)) {
				this.noMore = true
				return;
			} else {
				this.queryMchtList(this.couponId, this.actId);
			}
		},
		methods: {
			//获取优惠券适用的门店列表
			queryMchtList: function(couponId, actId) {
				let that = this;

				if (couponId) {
					that.params.couponId = couponId;
				} else {
					that.params.couponId = '';
				}

				if (actId) {
					that.params.actId = actId;
				} else {
					that.params.actId = '';
				} // console.log(that.params);

				util.showLoading('加载中');
				http.get('/zsnshMerchant/listCouponMerchants', {
						params: that.params
					})
					.then((res) => {
						if (200 == res.data.code) {
							console.log(res.data);
							util.hideLoading();
							let mchntList = res.data.result.bemList.list ? res.data.result.bemList.list : [];
							let allSize = res.data.result.AllSize ? res.data.result.AllSize : 0;
							let userLat = app.globalData.currLatitude;
							let userLng = app.globalData.currLongitude;

							if (!util.isEmpty(mchntList) && mchntList.length > 0) {
								for (let i = 0; i < mchntList.length; i++) {
									if (util.isEmpty(mchntList[i].lat) || util.isEmpty(mchntList[i].lng) || util
										.isEmpty(userLng) || util.isEmpty(userLat)) {} else {
										var distance = util.getDistance(mchntList[i].lat, mchntList[i].lng,
											userLat, userLng);
										mchntList[i].distance = distance;
									}
								}
							}

							that.templete = [...that.templete, ...mchntList];
							that.mchntList = that.templete
							that.allSize = allSize
							that.noMore = res.data.result.bemList.hasNextPage
						} else {
							util.hideLoading();
							console.log('组件：适用商户查询失败,', res.data);
						}
					})
					.catch((res) => {
						util.hideLoading();
						console.log('组件：适用商户查询异常');
					});
			},

			openLocation: function(e) {
				let item = e.currentTarget.dataset.item; // console.log(item)

				let addrInfo = {
					address: item.addr ? item.addr : '',
					name: item.merchantName ? item.merchantName : '',
					lat: item.lat,
					lng: item.lng
				};
				util.openLocation(addrInfo, app.globalData.currLatitude, app.globalData.currLongitude);
			}
		}
	};
</script>
<style>
	page {
		background-color: #fff;
	}

	.mcht-container {
		background: #ffffff;
		margin: 0 32rpx 30rpx;
	}

	.mcht-container-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 92rpx;
		border-bottom: 1px solid #f4f5f7;
	}

	.title-left {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.title-right {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666;
		font-weight: bold;
	}

	.icon-arrow {
		width: 24rpx;
		height: 24rpx;
		margin-left: 16rpx;
	}

	.mcht-list {
		padding: 8rpx 0 50rpx;
		background-color: #eee;
	}

	.mcht-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 164rpx;
		margin-top: 24rpx;
		border-radius: 16rpx;
		box-shadow: 0px 10px 30px 0px rgba(112, 136, 210, 0.1);
		padding: 24rpx;
		background-color: #fff;
	}

	.mcht-item-left {
		flex-shrink: 0;
		width: 440rpx;
	}

	.mcht-left-line1 {
		width: 460rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		line-height: 40rpx;
	}

	.mcht-left-line2 {
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-top: 8rpx;
		font-size: 24rpx;
		color: #999;
		line-height: 34rpx;
	}

	.line1-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mcht-item-right {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mcht-right-line1 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 102rpx;
		height: 52rpx;
		font-size: 22rpx;
		color: #666;
		background: #f6f6f6;
		border-radius: 16rpx;
	}

	.icon-map {
		width: 48rpx;
		height: 48rpx;
	}

	.mcht-right-line2 {
		color: #666;
		font-size: 22rpx;
		margin-top: 10rpx;
	}

	.noMore {
		text-align: center;
		font-size: 24rpx;
		color: #eee;
		margin: 30rpx 0;
	}
</style>
